CSS pasirinktinio paryškinimo kaskada: teksto žymėjimo prioriteto valdymas

Numatytasis teksto žymėjimo paryškinimas interneto naršyklėse dažnai yra paprastas mėlynas fonas su baltu tekstu. Nors tai yra funkcionalu, tai gali neatitikti jūsų svetainės prekės ženklo ar prieinamumo reikalavimų. Laimei, CSS siūlo galingus įrankius teksto žymėjimo paryškinimams pritaikyti, leidžiančius sukurti vizualiai patrauklią ir patogią vartotojui patirtį. Šiame įraše gilinamasi į CSS pasirinktinio paryškinimo kaskadą, nagrinėjamos įvairios galimos technikos ir kaip valdyti jų prioritetą, kad būtų pasiektas norimas efektas. Aptarsime standartinį ::selection pseudo-elementą, pažangesnį ::highlight pseudo-elementą ir kaip apibrėžti pasirinktinius paryškinimus, daugiausia dėmesio skiriant kaskados ir specifiškumo taisyklėms, kurios valdo jų elgseną.

Pagrindų supratimas: ::selection pseudo-elementas

::selection pseudo-elementas yra teksto žymėjimo stilizavimo CSS pagrindas. Jis leidžia keisti pažymėto teksto išvaizdą elemento viduje. Jis plačiai palaikomas šiuolaikinėse naršyklėse ir suteikia paprastą būdą pritaikyti fono spalvą, teksto spalvą ir kitas pagrindines pažymėto teksto savybes.

Pagrindinis ::selection naudojimas

Norėdami naudoti ::selection, tiesiog nurodykite jį CSS taisykle ir apibrėžkite norimus stilius. Pavyzdžiui, norėdami pakeisti fono spalvą į geltoną, o teksto spalvą į juodą, kai tekstas yra pažymėtas, naudotumėte šį CSS kodą:

            ::selection {
  background-color: yellow;
  color: black;
}

            

              
                Copy
              
            
          

Ši taisyklė bus taikoma visiems teksto žymėjimams jūsų svetainėje. Jei norite nurodyti konkrečius elementus, galite naudoti specifiškesnius selektorius:

            p::selection {
  background-color: lightgreen;
  color: darkgreen;
}

            

              
                Copy
              
            
          

Ši taisyklė paveiks tik teksto žymėjimus <p> (pastraipos) elementuose.

::selection apribojimai

Nors ::selection yra naudingas įrankis, jis turi apribojimų. Jis pirmiausia leidžia keisti pagrindines savybes, tokias kaip background-color ir color. Sudėtingesnės stiliaus parinktys, pavyzdžiui, gradientų ar šešėlių taikymas, nėra tiesiogiai palaikomos. Be to, ::selection nesuteikia mechanizmo, leidžiančio kurti kelis, vienas kitą dengiančius paryškinimus su skirtingais stiliais. Štai čia į pagalbą ateina ::highlight pseudo-elementas.

Pristatome ::highlight: galingesnė alternatyva

::highlight pseudo-elementas yra naujesnis CSS priedas, siūlantis didesnį lankstumą ir kontrolę teksto žymėjimo paryškinimams. Jis leidžia apibrėžti vardinius paryškinimus, suteikiant galimybę taikyti skirtingus stilius skirtingoms pažymėto teksto dalims. Tai ypač naudinga sudėtingiems maketams arba kai reikia atskirti skirtingų tipų turinį žymėjimo viduje.

Vardinių paryškinimų apibrėžimas naudojant highlight-name savybę

Raktas į ::highlight naudojimą yra highlight-name savybė. Ši savybė leidžia priskirti pavadinimą konkrečiam paryškinimui, kurį vėliau galite nurodyti CSS taisyklėmis. Norėdami naudoti ::highlight, pirmiausia turite apibrėžti vardinį paryškinimą naudodami JavaScript. Taip yra todėl, kad pats CSS negali apibrėžti naujo paryškinimo pavadinimo; jis gali tik *stilizuoti* paryškinimus, kuriuos naršyklė jau sukūrė. Štai pavyzdys:

            // JavaScript:
CSS.registerProperty({
  name: '--my-custom-highlight',
  syntax: '<color>',
  inherits: false,
  initialValue: 'transparent',
});

            

              
                Copy
              
            
          

Šis Javascript kodas registruoja CSS pasirinktinę savybę, pavadintą --my-custom-highlight, kuri priima spalvų reikšmes ir nėra paveldima. Tai yra būtinas žingsnis prieš stilizuojant jūsų paryškinimą. Dabar galite naudoti CSS, kad pritaikytumėte paryškinimą:

            ::highlight(my-custom-highlight) {
  background-color: rgba(255, 0, 0, 0.3);
  color: white;
}

            

              
                Copy
              
            
          

Ši CSS taisyklė taikoma paryškinimui, pavadintam „my-custom-highlight“, ir pritaiko raudoną foną su 30% permatomumu bei baltą tekstą. Atkreipkite dėmesį į rgba naudojimą permatomumui pasiekti. Turite sukurti pavadinimą (pvz., `my-custom-highlight`), o tada nurodyti jį CSS per `::highlight(my-custom-highlight)`.

Paryškinimų taikymas naudojant JavaScript

Dabar, norėdami faktiškai pritaikyti paryškinimą mūsų tinklalapyje, naudosime JavaScript. Tai paprastai daroma apgaubiant paryškintiną teksto dalį <span> žyma ir priskiriant highlight-name stilių:

            <p>This is some <span style="--highlight: my-custom-highlight;">important</span> text.</p>

            

              
                Copy
              
            
          

Šiame pavyzdyje žodis „important“ (svarbus) bus paryškintas stiliais, apibrėžtais „my-custom-highlight“. Kitas pavyzdys galėtų būti:

            <p>This is <span style="--highlight: warning-highlight;">a warning message</span> that needs attention.</p>

            

              
                Copy
              
            
          

Čia „warning-highlight“ atitinka pavadinimą, kurį užregistravote su CSS.registerProperty ir naudojote ::highlight(warning-highlight) CSS bloke.

::highlight privalumai

• Keli paryškinimai: Galite apibrėžti kelis vardinius paryškinimus ir taikyti juos skirtingoms teksto dalims.
• Smulkiagrūdė kontrolė: Galite nurodyti konkrečias teksto dalis su skirtingais paryškinimo stiliais.
• Semantinis paryškinimas: Galite naudoti paryškinimus, kad perteiktumėte prasmę, pavyzdžiui, paryškintumėte klaidas ar įspėjimus.

CSS paryškinimo kaskados supratimas: prioritetas ir specifiškumas

Kai tam pačiam tekstui taikomi keli paryškinimo stiliai, CSS kaskada nustato, kuris stilius turi viršenybę. Kaskada yra taisyklių rinkinys, kurį naršyklės naudoja konfliktams tarp skirtingų CSS taisyklių išspręsti. Suprasti kaskadą yra labai svarbu norint valdyti pasirinktinius paryškinimo stilius ir užtikrinti, kad norimi stiliai būtų pritaikyti teisingai.

Viršenybės tvarka

CSS kaskada laikosi konkrečios viršenybės tvarkos, kurią galima apibendrinti taip (nuo žemiausio iki aukščiausio prioriteto):

1. Naršyklės agento stiliai: Naršyklės numatytieji stiliai.
2. Vartotojo stiliai: Vartotojo apibrėžti stiliai (pvz., per naršyklės plėtinius).
3. Autoriaus stiliai: Svetainės kūrėjo apibrėžti stiliai (jūsų CSS).
4. !important autoriaus stiliai: Svetainės kūrėjo apibrėžti stiliai su !important raktažodžiu.
5. !important vartotojo stiliai: Vartotojo apibrėžti stiliai su !important raktažodžiu.

Kiekviename iš šių lygių specifiškumas atlieka lemiamą vaidmenį. Specifiškumas nurodo CSS selektoriaus svorį ar svarbą. Specifiškesni selektoriai nugali mažiau specifiškus selektorius.

Specifiškumo taisyklės

Specifiškumas apskaičiuojamas pagal šias taisykles:

1. Įterptiniai stiliai: Stiliai, apibrėžti tiesiogiai HTML elemente naudojant style atributą, turi didžiausią specifiškumą.
2. ID: Selektoriai, kurie nurodo elementus pagal jų ID (pvz., #my-element), turi aukštą specifiškumą.
3. Klasės, pseudo-klasės ir atributai: Selektoriai, kurie nurodo elementus pagal jų klasę (pvz., .my-class), pseudo-klases (pvz., :hover) ar atributus (pvz., [type="text"]), turi vidutinį specifiškumą.
4. Elementai ir pseudo-elementai: Selektoriai, kurie nurodo elementus pagal jų žymos pavadinimą (pvz., p) ar pseudo-elementus (pvz., ::selection, ::highlight), turi žemą specifiškumą.
5. Universalus selektorius: Universalus selektorius (*) turi mažiausią specifiškumą.

Kai tam pačiam elementui taikomi keli selektoriai, naršyklė apskaičiuoja kiekvieno selektoriaus specifiškumą ir pritaiko stilių iš selektoriaus, turinčio didžiausią specifiškumą. Jei du selektoriai turi tą patį specifiškumą, taikomas stilius iš selektoriaus, kuris CSS stilių lape yra vėliau.

Specifiškumo taikymas paryškinimo stiliams

Dirbant su pasirinktiniais paryškinimo stiliais, specifiškumas yra ypač svarbus, nes galite naudoti ir ::selection, ir ::highlight, galbūt kartu su įterptiniais stiliais. Štai kaip specifiškumo aspektai gali būti taikomi:

1. ::selection ir ::highlight: ::highlight paprastai laikomas *specifiškesniu* nei ::selection. Tai reiškia, kad jei ir ::selection, ir ::highlight taisyklės taikomos tam pačiam tekstui, ::highlight taisyklės paprastai turės viršenybę.
2. Įterptiniai stiliai: Kaip visada, įterptiniai stiliai (naudojant style atributą tiesiogiai HTML elemente) nugalės ir ::selection, ir ::highlight stilius, nebent naudojamas !important.
3. Selektoriaus specifiškumas: Selektorių, naudojamų su ::highlight, specifiškumas gali dar labiau paveikti rezultatą. Pavyzdžiui, p::highlight(my-highlight) yra specifiškesnis nei tiesiog ::highlight(my-highlight) ir turės viršenybę, jei taikomi abu.

Specifiškumo pavyzdžiai praktikoje

Iliustruokime tai keliais pavyzdžiais:

            /* CSS */
::selection {
  background-color: blue;
  color: white;
}

::highlight(my-highlight) {
  background-color: red;
  color: yellow;
}

            

              
                Copy
              
            
          

            <p>This is some <span style="--highlight: my-highlight;">important</span> text.</p>

            

              
                Copy
              
            
          

Šiuo atveju, kai vartotojas pažymi tekstą, dalis, pažymėta kaip „my-highlight“, turės raudoną foną ir geltoną tekstą, nes ::highlight(my-highlight) taisyklė yra specifiškesnė ir nugali bendrą ::selection taisyklę tai konkrečiai teksto daliai.

Apsvarstykite kitą pavyzdį:

            /* CSS */
::selection {
  background-color: blue;
  color: white;
}

p::selection {
  background-color: green;
  color: black;
}

            

              
                Copy
              
            
          

            <p>This is some text.</p>

            

              
                Copy
              
            
          

Čia, jei vartotojas pažymi tekstą <p> žymos viduje, jis turės žalią foną ir juodą tekstą. p::selection selektorius yra specifiškesnis nei globalus ::selection selektorius.

Paryškinimo kaskados valdymo strategijos

Norėdami efektyviai valdyti paryškinimo kaskadą ir užtikrinti, kad jūsų pasirinktiniai paryškinimo stiliai būtų taikomi kaip numatyta, apsvarstykite šias strategijas:

1. Naudokite specifinius selektorius

Naudokite specifinius selektorius, kad nurodytumėte elementus, kuriuos norite stilizuoti. Pavyzdžiui, vietoj globalios ::selection taisyklės, nurodykite konkrečius elementus ar svetainės dalis naudodami specifiškesnius selektorius, tokius kaip .my-section::selection arba #my-element::selection.

2. Išnaudokite highlight-name savybę

Kai tik įmanoma, naudokite highlight-name savybę su ::highlight, kad apibrėžtumėte vardinius paryškinimus. Tai leidžia nurodyti konkrečias teksto dalis ir taikyti skirtingus stilius, atsižvelgiant į jų semantinę prasmę ar kontekstą.

3. Venkite !important (dažniausiai)

Nors !important raktažodį gali kilti pagunda naudoti, jo reikėtų vengti, kai tik įmanoma. Naudojant !important jūsų CSS gali tapti sunkiau prižiūrimas ir gali sukelti netikėtų konfliktų. Vietoj to, sutelkite dėmesį į specifiškumo naudojimą kaskadai valdyti.

4. Organizuokite savo CSS

Organizuokite savo CSS logiškai ir nuosekliai. Naudokite komentarus, kad dokumentuotumėte savo kodą ir sugrupuotumėte susijusius stilius. Tai palengvins jūsų CSS supratimą ir priežiūrą.

5. Kruopščiai testuokite

Kruopščiai testuokite savo pasirinktinius paryškinimo stilius skirtingose naršyklėse ir įrenginiuose. Skirtingos naršyklės gali turėti šiek tiek skirtingas CSS kaskados implementacijas, todėl svarbu užtikrinti, kad jūsų stiliai būtų taikomi nuosekliai visose platformose.

6. Atsižvelkite į prieinamumą

Visada atsižvelkite į prieinamumą kurdami pasirinktinius paryškinimo stilius. Užtikrinkite, kad jūsų pasirinktos spalvos suteiktų pakankamą kontrastą tarp teksto ir fono. Taip pat venkite naudoti stilius, kurie gali blaškyti ar klaidinti vartotojus su kognityvinėmis negaliomis.

Prieinamumo aspektai

Teksto žymėjimo paryškinimų pritaikymas gali žymiai pagerinti vartotojo patirtį, tačiau labai svarbu teikti pirmenybę prieinamumui. Blogai suprojektuoti paryškinimai gali apsunkinti turinio skaitymą ir supratimą vartotojams su regos sutrikimais ar kognityvinėmis negaliomis.

Spalvų kontrastas

Užtikrinkite, kad spalvų kontrastas tarp teksto ir fono būtų pakankamas. Interneto turinio prieinamumo gairės (WCAG) rekomenduoja kontrasto santykį bent 4.5:1 normaliam tekstui ir 3:1 dideliam tekstui. Naudokite internetinius įrankius, kad patikrintumėte savo paryškinimo spalvų kontrasto santykį.

Venkite mirksėjimo ar blyksėjimo

Venkite naudoti mirksinčius ar blyksinčius efektus savo paryškinimo stiliuose. Šie efektai gali blaškyti ir sukelti priepuolius vartotojams, sergantiems fotosensityvia epilepsija.

Pateikite aiškias vizualines užuominas

Užtikrinkite, kad paryškinimo stiliai pateiktų aiškias vizualines užuominas, rodančias, kad tekstas yra pažymėtas. Venkite naudoti stilius, kurie gali būti dviprasmiški ar klaidinantys. Pavyzdžiui, venkite naudoti fono spalvas, kurios yra per daug panašios į numatytąją fono spalvą.

Testuokite su pagalbinėmis technologijomis

Testuokite savo pasirinktinius paryškinimo stilius su pagalbinėmis technologijomis, tokiomis kaip ekrano skaitytuvai. Užtikrinkite, kad pažymėtas tekstas būtų tinkamai perskaitomas ekrano skaitytuvo ir kad paryškinimo stiliai netrukdytų vartotojui naršyti ir suprasti turinį.

Tarptautinimo ir lokalizavimo aspektai

Kuriant svetaines pasaulinei auditorijai, svarbu atsižvelgti į tarptautinimą (i18n) ir lokalizavimą (l10n). Tai apima jūsų svetainės turinio ir dizaino pritaikymą skirtingoms kalboms, kultūroms ir regionams.

Teksto kryptis

Atkreipkite dėmesį į skirtingas teksto kryptis. Kai kurios kalbos, pavyzdžiui, arabų ir hebrajų, rašomos iš dešinės į kairę (RTL). Užtikrinkite, kad jūsų pasirinktiniai paryškinimo stiliai veiktų teisingai tiek su iš kairės į dešinę (LTR), tiek su iš dešinės į kairę (RTL) teksto kryptimis. Čia gali būti naudingos CSS loginės savybės (pvz., `margin-inline-start`, `border-inline-end`).

Kultūriniai skirtumai

Būkite atidūs kultūriniams skirtumams renkantis paryškinimo spalvas. Spalvos gali turėti skirtingas reikšmes skirtingose kultūrose. Pavyzdžiui, raudona spalva vienoje kultūroje gali simbolizuoti sėkmę, o kitoje – pavojų. Ištirkite spalvų kultūrinę reikšmę savo svetainės tikslinėse rinkose.

Šriftų palaikymas

Užtikrinkite, kad jūsų pasirinkti šriftai palaikytų skirtingose kalbose naudojamus simbolius ir glifus. Naudokite Unicode šriftus, kurie palaiko platų simbolių spektrą. Taip pat apsvarstykite galimybę naudoti atsarginių šriftų strategijas, kad užtikrintumėte, jog jūsų svetainės tekstas būtų rodomas teisingai, net jei vartotojo įrenginyje nėra įdiegtų reikiamų šriftų.

Praktiniai pavyzdžiai ir naudojimo atvejai

Panagrinėkime keletą praktinių pavyzdžių ir naudojimo atvejų CSS pasirinktinio paryškinimo kaskadai:

1. Semantinis kodo paryškinimas

Galite naudoti pasirinktinius paryškinimus, norėdami paryškinti skirtingų tipų kodo elementus, tokius kaip raktažodžiai, kintamieji ir komentarai. Tai gali palengvinti vartotojams skaityti ir suprasti kodo fragmentus.

            /* CSS */
::highlight(keyword) {
  color: #0077cc;
}

::highlight(variable) {
  color: #cc0077;
}

::highlight(comment) {
  color: #666666;
  font-style: italic;
}

            

              
                Copy
              
            
          

            <pre><code>
  <span style="--highlight: keyword;">function</span> <span style="--highlight: variable;">greet</span>(<span style="--highlight: variable;">name</span>) {
    <span style="--highlight: comment;">// Tai yra komentaras</span>
    console.log("Hello, " + <span style="--highlight: variable;">name</span> + "!");
  }
</code></pre>

            

              
                Copy
              
            
          

2. Paieškos terminų paryškinimas

Galite naudoti pasirinktinius paryškinimus, norėdami paryškinti paieškos terminus paieškos rezultatuose. Tai gali padėti vartotojams greitai identifikuoti teksto dalis, kurios yra susijusios su jų paieškos užklausa.

            /* CSS */
::highlight(search-term) {
  background-color: yellow;
  color: black;
}

            

              
                Copy
              
            
          

            <p>This is a <span style="--highlight: search-term;">search</span> result that contains the <span style="--highlight: search-term;">search</span> term.</p>

            

              
                Copy
              
            
          

3. Privalomų laukų nurodymas formose

Galite naudoti pasirinktinius paryškinimus, norėdami nurodyti privalomus laukus formose. Tai gali padėti vartotojams greitai identifikuoti laukus, kuriuos jie turi užpildyti prieš pateikdami formą.

            /* CSS */
::highlight(required) {
  background-color: #ffeeee;
  border: 1px solid red;
}

            

              
                Copy
              
            
          

            <label for="name">Name:</label>
<input type="text" id="name" <span style="--highlight: required;">required</span><br>

            

              
                Copy
              
            
          

Išvada

CSS pasirinktinio paryškinimo kaskada suteikia galingus įrankius teksto žymėjimo paryškinimams pritaikyti ir vizualiai patraukliai bei patogiai vartotojui patirčiai sukurti. Suprasdami CSS kaskadą, specifiškumo taisykles bei ::selection ir ::highlight galimybes, galite efektyviai valdyti paryškinimo stilius ir užtikrinti, kad jie būtų taikomi kaip numatyta. Nepamirškite atsižvelgti į prieinamumą ir tarptautinimą kurdami pasirinktinius paryškinimo stilius, kad sukurtumėte svetainę, kuri būtų įtrauki ir prieinama pasaulinei auditorijai. Atidžiai planuodami ::selection ir ::highlight naudojimą kartu su semantiniu HTML ir CSS pasirinktinėmis savybėmis, galite pasiekti tiksliai tokį paryškinimo efektą, kokio norite, pagerindami tiek savo tinklalapių naudojamumą, tiek vizualinį patrauklumą. Šių CSS funkcijų siūlomas lankstumas leidžia sukurti pritaikytą ir intuityvią patirtį vartotojams, padarant jūsų turinį patrauklesnį ir prieinamesnį.